import React from 'react'
import OrderItem from '../orderItem/orderItem.jsx'

class OrderList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        fetch('./mock/orders.json').then(res => {
            if (res.ok) {
                res.json().then(res => {
                    this.setState({
                        data: res.order
                    })
                })
            }
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.data.map(item => {
                        return <OrderItem orderItem={item} key={item.id} onSubmit={this.handleSubmit.bind(this)} />
                    })
                }
            </div>
        )
    }

    handleSubmit(id, comment, stars) {
        const newData = this.state.data.map(item => {
            return item.id === id
                ? { ...item, comment, stars, ifCommented: true }
                : item;
        });
        this.setState({
            data: newData
        })
    }
}

export default OrderList